<template>
  <div id="main-wrapper" >
    <navbar id='main-header' :show="true"></navbar>
    <sidebar ></sidebar>
    <div class="page-wrapper" :style='cPageStyle'>
      <app-main></app-main>
    </div>
    <footer-bar></footer-bar>
  </div>
</template>
<style lang="less">
  #layout-container.nav-fix{
    height: auto;
    min-height: 100%;
    width: 100%;
    position: relative;
  }
</style>
<script>
  import { Navbar, Sidebar, AppMain, FooterBar } from 'components/layout/'
  import { mapGetters, mapActions } from 'vuex'
  import socketIo from './utils/socket'
  import {html} from './utils/dom'
  export default {
    data(){
      return {

      }
    },
    components: {
      Navbar,
      Sidebar,
      AppMain,
      FooterBar
    },
    computed:{
      ...mapGetters({
        device: 'device' ,
        user: 'user' ,
      }),
      cPageStyle(){
        return {"min-height":this.device.minHeight + "px"}
      }
    },
    mounted(){
      $("body").trigger("resize");
      // this.socketInit();
    },
    methods:{
      // reconnectSocketChange(text){
      //   this.$Modal.confirm({
      //     title: '消息自动提醒连接状态',
      //     content: '<p>'+text+'</p>',
      //     okText:"再次尝试连接",
      //     cancelText:"不再连接",
      //     onOk: () => {
      //       socketIo.close();
      //       this.socketInit()
      //     }
      //   });
      },
      // async socketInit(){
      //     if(this.user&&this.user.id){
      //         /*if (window.Notification) {
      //           if (Notification.permission != "granted") {
      //             Notification.requestPermission((permission) =>{
      //               if(permission!='granted'){
      //                   this.$Notice.warning({
      //                       title:'友情提示',
      //                       desc:'你已禁止消息提醒，使用网页内部消息',
      //                       duration:3,
      //                   });
      //               }
      //             });
      //           }
      //         }else {
      //             this.$Notice.warning({
      //                 title:'友情提示',
      //                 desc:'你的浏览器版本过低只能使用网页消息',
      //                 duration:3,
      //             });
      //         }*/

      //         var socket  = await socketIo.init(this.user.id);
      //         if(socket){
      //             socket.on('disconnect', (reason)=>{
      //                 //服务端主动断开连接
      //                 if(reason=='transport close'){
      //                     this.reconnectSocketChange('云端主动断开连接');
      //                 }
      //                 //本地主动断开连接
      //                 if(reason=='io client disconnect'){

      //                 }
      //             });
      //             socket.on(socketIo.MSG_KEY, (online_stat)=>{
      //                 console.log(online_stat);
      //                 try{
      //                     let c = JSON.parse(html.decodeByRegExp(online_stat));
      //                     console.log(c);
      //                      if (window.Notification) {
      //                        let popNotice = ()=> {
      //                          if (Notification.permission == "granted") {
      //                            let notification = new Notification("你有新消息", {
      //                              body: c.title,
      //                              // icon: '//image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
      //                            });
      //                            notification.onclick = ()=>{
      //                              this.ok(c);
      //                              notification.close();
      //                            };
      //                          }else {
      //                              this.insetMeg(c);
      //                          }
      //                        };
      //                        if (Notification.permission == "granted") {
      //                          popNotice();
      //                        } else{
      //                          Notification.requestPermission((permission) =>{
      //                            popNotice();
      //                          },()=>{
      //                              console.log('禁止')
      //                          });
      //                        }
      //                      } else {
      //                        console.log('浏览器版本过低只能使用网页消息');
      //                        this.insetMeg(c);
      //                      }
      //                     this.insetMeg(c);
      //                 }catch (e){
      //                     return false;
      //                 }
      //             });
      //         }else {
      //             this.reconnectSocketChange('未连接成功');
      //         }
      //     }
      // },
      // insetMeg(c){
      //     this.$Notice.info({
      //         name:'addMsgShowNotice',
      //         title:'你有新消息',
      //         top: 50,
      //         duration: 6,
      //         render:(h)=>{
      //             return h('div',
      //                 [
      //                     h('h5',{
      //                         style: {
      //                             'font-weight':'bold',
      //                         },
      //                         class: {
      //                             'm-t-sm':true,
      //                         },
      //                         on:{
      //                             'click':($event)=>{
      //                                 this.ok(c);
      //                                 this.$Notice.close('addMsgShowNotice');
      //                             },
      //                         }
      //                     },c.title),
      //                 ])
      //         },
      //     });
      // },
    //   ok(c){
    //       this.$router.push({name:'messageDetail',params:{id:c.id}})
    //   },
    // },
    // beforeDestroy:function(){
    //   socketIo.close();
    // }
  }
</script>
